<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="作业.css" type="text/css" rel="stylesheet">
<script>
window.onload = function (){
  var oDiv = document.getElementById('div1');  //共用的
  var oBtn = document.getElementById('cli');
  var oDiv1 = document.getElementById('box');
  var oDiv2 = document.getElementById('select');
  oBtn.onclick = function (){
	oDiv1.style.display = 'block';
	oDiv2.style.display = 'block';
  };
  var oBtn1 = document.getElementById('red');
  oBtn1.onclick = function (){
    oDiv.style.background = 'red';
  };
  var oBtn2 = document.getElementById('yellow');
  oBtn2.onclick = function (){
    oDiv.style.background = 'yellow';
  };
  var oBtn3 = document.getElementById('blue');
  oBtn3.onclick = function (){
    oDiv.style.background = 'blue';
  }
  var oBtn4 = document.getElementById('w2');
  oBtn4.onclick = function (){
    oDiv.style.width = '200px';
  };
  var oBtn5 = document.getElementById('w3');
  oBtn5.onclick = function (){
    oDiv.style.width = '300px';
  };
  var oBtn6 = document.getElementById('w4');
  oBtn6.onclick = function (){
    oDiv.style.width = '400px';
  };  
  var oBtn7 = document.getElementById('h2');
  oBtn7.onclick = function (){
    oDiv.style.height = '200px';
  };
  var oBtn8 = document.getElementById('h3');
  oBtn8.onclick = function (){
    oDiv.style.height = '300px';
  };
  var oBtn9 = document.getElementById('h4');
  oBtn9.onclick = function (){
    oDiv.style.height = '400px';
  };
  var oBtn10 = document.getElementById('b1');
  oBtn10.onclick = function(){
    oDiv.style.width = '';
	oDiv.style.height = '';
	oDiv.style.background = '';   //为空时清空原有添加的属性
    
  };
  var oBtn11 = document.getElementById('b2');
  oBtn11.onclick = function (){
    oDiv1.style.display = 'none';
	oDiv2.style.display = 'none';
  };
}
</script>
</head>
<body>
<h1>请为下面的div设置样式：<input id="cli" type="button" value="点击设置"></h1>
<div id="div1"></div>
<div id="box"></div>
  <div id="select">
    <div>
      <p>请选择背景色：</p>
      <ul class="color">
        <li id="red"><a href="#">红</a></li>
        <li id="yellow"><a href="#">黄</a></li>
        <li id="blue"><a href="#">蓝</a></li>
      </ul>
    </div>
    <div>
      <p>请选择宽(px)：</p>
      <ul>
        <li class="w" id="w2"><a href="#">200</a></li>
        <li class="w" id="w3"><a href="#">300</a></li>
        <li class="w" id="w4"><a href="#">400</a></li>
      </ul>
    </div>
    <div>
      <p>请选择高(px)：</p>
      <ul>
        <li class="w" id="h2"><a href="#">200</a></li>
        <li class="w" id="h3"><a href="#">300</a></li>
        <li class="w" id="h4"><a href="#">400</a></li>
      </ul>
    </div>
    <form class="btn" action="#">
      <input class="btn1" id="b1" type="button" value="恢复" >
      <input class="btn1" id="b2" type="button" value="确定">
    </form>
  </div>
</body>
</html>
